<template>
  <div class="content">
    <el-row class="top">
      <el-col :span="12" class="top-search">
        <el-input
          v-model="searchInput"
          class="top-search-input"
          placeholder="请输订单号搜索"
          prefix-icon="el-icon-search"
        />
        <el-button
          class="top-search-but"
          type="primary"
          icon="el-icon-search"
          @click="pushSearchOrder"
        >搜索</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="orderPage.list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="订单号" width="190" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="订单名" align="center">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="费用" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.price }}￥</template>
      </el-table-column>
      <el-table-column label="创建时间" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
      </el-table-column>
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="scope">{{ scope.row.type.name }}</template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <div class="flex row item-do">
            <el-button class="item-do-but" size="mini" plain @click="goOrder(scope.$index, scope.row)">查看</el-button>
            <!-- <el-button
              class="item-do-but"
              size="mini"
              type="success"
              plain
              @click="updateOrder(scope.$index, scope.row)"
            >修改</el-button> -->
            <el-button
              class="item-do-but"
              size="mini"
              type="danger"
              plain
              @click="deleteOrder(scope.$index, scope.row.id)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Page :page="orderPage" @changePageNum="handleCurrentChange" @changePageSize="handleSizeChange" />
  </div>
</template>

<script>
import Page from '@/components/Page'
import {
  deleteTravelOrderById,
  searchTravelOrderById
} from '@/api/order'
export default {
  components: {
    Page
  },
  data() {
    return {
      searchInput: '',
      listLoading: false,
      creatTime: [],
      orderPage: {
        pageNum: 1
      }
    }
  },
  created() {
    this.searchInput = this.$route.params.id
    this.searchOrder()
  },
  methods: {
    searchOrder() {
      this.listLoading = true
      searchTravelOrderById(this.searchInput, this.orderPage.pageNum).then(res => {
        this.orderPage = res.data
      }).finally(() => {
        this.listLoading = false
      })
    },
    pushSearchOrder() {
      const path = `/search-order/theme/${this.searchInput}`
      if (path === this.$route.fullPath) {
        return
      }
      this.$router.push({ path })
    },
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`)
    },
    handleCurrentChange(pageNum) {
      this.orderPage.pageNum = pageNum
      this.searchOrder()
    },
    goOrder(index, order) {
      this.listLoading = true
      this.$router.push({
        path: `/query-order/theme/${order.id}`
      })
      this.listLoading = false
    },
    deleteOrder(index, id) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTravelOrderById(id).then(res => {
          this.$message.success(res.message)
          this.queryTravelOrderByCreatTImeAndType()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
    margin-bottom: 8px;
  &-search{
    float:left;
    &-input{
      width: 264px;
      margin-right: 8px;
    }
  }
}
.item-do {
  justify-content: space-around;

  &-but {
    margin: 2px 0;
  }
}
</style>

